<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import * as API from '@/api'
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        expiry:0,
        frozen:0,
        storage:0,
        unrent:0,
        use:0
      },
      pageflag: true,
      timer: null,
      autoTime: 10 * 60 * 1000
    };
  },
  created() {
    this.getData()
  },
  mounted() {
    this.switper()
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false

      // currentGET('big1').then(res => {
      //   //只打印一次
      //   if (!this.timer) {
      //     console.log("设备总览", res);
      //   }
      //   if (res.success) {
      //     this.countUserNumData = res.data
      //     this.$nextTick(() => {
      //       this.init()
      //     })

      //   } else {
      //     this.pageflag = false
      //     this.$Message({
      //       text: res.msg,
      //       type: 'warning'
      //     })
      //   }
      // })
      // this.countUserNumData = {
      //   "storage": 63,
      //   "frozen": 8,
      //   "use": 1929,
      //   "expiry": 166,
      //   "unrent": 6753
      // }
      // this.$nextTick(() => {
      //       this.init()
      //     })
      // return 
      API.GET('/super/screen/user_stat').then(res => {
        if (res.code === 1) {
          this.countUserNumData = { ...res.data }
          this.$nextTick(() => {
            this.init()
          })
        } else {
          this.pageflag = false
        }
      })
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.autoTime);
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.autoTime);
      });
    },
    init() {
      let total = 0;
      for (let i in this.countUserNumData) {
        total += this.countUserNumData[i]
      }
      let colors = ["#d4237a", "#016f15", "#8fd9b6", '#ECA444', '#33A1DB'];
      let piedata = {
        name: "用户总览",
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '48%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        minShowLabelAngle: 0,
        minAngle:0.1,
        padAngle: 2,
        label: {
          show: false,
          position: 'center'
        },

        color: colors,
        data: [
          {
            value: this.countUserNumData.expiry,
            name: "逾期",
            label: {
              shadowColor: colors[4],
            },
          },
          {
            value: this.countUserNumData.use,
            name: "使用中",
            label: {
              shadowColor: colors[2],
            },
          },
          {
            value: this.countUserNumData.frozen,
            name: "冻结",
            label: {
              shadowColor: colors[3],
            },
          },
          {
            value: this.countUserNumData.unrent,
            name: "未租",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.countUserNumData.storage,
            name: "寄存",
            label: {
              shadowColor: colors[1],
            },
          },



        ],
      };
      this.options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
            fontSize: 16,
          },
        },
        legend: {
          show: false,
          top: "1%",
          left: "center"
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: "   {b|{b}} \n  {c|{c}个} {per|{d}%}  ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding:3
                  // lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,

            },
            emphasis: {
              show: true,
            },
          },
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>
